
// 使用本地Vue包 - 相对路径导入,如果不是用构建工具的话 直接import {createApp} from 'vue' 浏览器会报错找不到
import { createApp,ref,computed,onMounted } from '../node_modules/vue/dist/vue.esm-browser.js'

console.log('Vue createApp:', createApp)

function getList(){

    let list = []
    for(let i = 0; i < 100000; i++){
        list.push(`我是第${i}条数据,随机值${Math.random()}`)
    }
    return new Promise((resolve,reject)=>{ //模拟异步请求
        setTimeout(()=>{
            resolve(list)
        },100)
    })
}

// 使用Vue 3 Composition API语法
const app = createApp({
  setup() {
    // 响应式数据
    const message = ref('Hello Vue 3 with ES6 Modules!')
    const list = ref([]) //全量数据

    const itemHeight = ref(40)// 行高
    const buffer = ref(5)// 上下缓冲行数
    const scrollTop = ref(0)// 实时滚动距离
    const wrapHeight = ref(400)// 可视区高度
    const totalHeight = computed(() => list.value.length * itemHeight.value)// 总高度 总高度 = 行数 * 行高

    //计算当前应该渲染哪一行
    const visibleRows = computed(() => {
      const start = Math.floor(scrollTop.value / itemHeight.value) // 开始行
      const end = Math.ceil((scrollTop.value + wrapHeight.value) / itemHeight.value) // 结束行
      const sliceStart = Math.max(0, start - buffer.value)
      const sliceEnd = Math.min(list.value.length, end + buffer.value)
      console.log('scrollTop:', scrollTop.value, 'start:', start, 'end:', end, 'sliceStart:', sliceStart, 'sliceEnd:', sliceEnd)
      return list.value.slice(sliceStart, sliceEnd)
    })
    // 方法
    const getListData = async () => {
      let data = await getList()
      // 清空数组并添加新数据
      list.value = data
    }
    // 滚动回调,改变实时滚动举例
    const onScroll = (e) => {
      scrollTop.value = e.target.scrollTop
    }
    const addItem = () => {
      console.log('添加')
      list.value.push({ id: list.value.length + 1, name: 'item' + (list.value.length + 1) })
    }
    
    const removeItem = () => {
      console.log('删除')
      if(list.value.length > 0) {
        list.value.pop()
      }
    }
    
    // 生命周期
    onMounted(() => {
      getListData()
      // 设置可视区高度
      // wrapHeight.value = 300
    })
    
    // 返回模板需要的数据和方法
    return {
      message,
      list,
      getListData,
      addItem,
      removeItem,
      onScroll,
      visibleRows,
      totalHeight,
      itemHeight,
      scrollTop,
      wrapHeight
    }
  },
})

app.mount('#app')